<template>
    <div :class="`tech-classify-page shop-tabbar-container ${mode}`" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
        <div class="search-element"></div>
        <div class="menu-list-container">
            <!-- 左侧菜单 -->
            <div class="goods-type-container is-fixed">
                <BadgeGroup :active-key="categoryIndex">
                    <div v-for="(item, index) in categoryList" :key="item.id">
                        <Badge class="goods-type-list" :title="item.name" @click="changeCategory(index)" />
                    </div>
                </BadgeGroup>
            </div>
            <!-- 右侧菜品列表 -->
            <div class="goods-container">
                <Row class="content" gutter="12" v-if="shelfList.length > 0">
                    <Col span="12" v-for="(item, index) in shelfList" :key="index">
                        <GoodsListItem :itemInfo="item" @addToBag="addToBag" :isBrand="true" :mode="mode" :styleMode="styleMode" :theme="theme" />
                    </Col>
                </Row>
            </div>
        </div>
        <ChooseGoods
            v-if="goodsDetail"
            ref="choose"
            :info="goodsDetail"
            :isOnlySelect="false"
            :isChangeSku="false"
            :isAddBag="true"
            :isNowBuy="false"
            :mode="mode"
            :styleMode="styleMode"
            :theme="theme"
            @ensure="ensureChoose"
        />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Badge, BadgeGroup, Row, Col } from 'vant';
import GoodsListItem from './components/GoodsListItem';
import ChooseGoods from './components/ChooseGoods';

import '@styles/shop/tabbar';

import { setTitle } from '@common/utils';
import { TipSuccess } from '@common/tip';
import logger from '@common/logger';
import EventBus from '@common/eventBus';
import { PageMixin } from '@common/mixin';
import { getBrandIdCookie, getBrandNameCookie } from '@biztools/info';

export default {
    name: 'Classify', // 分类
    mixins: [PageMixin],
    components: {
        Badge,
        BadgeGroup,
        Row,
        Col,
        GoodsListItem,
        ChooseGoods,
    },
    data() {
        return {
            categoryIndex: 0,
            goodsDetail: null,
        };
    },
    computed: {
        ...mapState({
            categoryList: state => state.classify.categoryList,
            shelfList: state => state.classify.shelfList,
        }),
    },
    async created() {
        setTitle('分类');
        // 获取分组信息
        await this.getClassifyList();
    },
    methods: {
        ...mapActions([
            'getClassifyList',
            'getClassifyShelf',
            'getClassifyShelfNext',
            'addShopBagItem',
        ]),
        handleTouchStart(e) {
            const { changedTouches } = e;
            this.startY = changedTouches[0].pageY;
        },
        async handleTouchEnd(e) {
            const { changedTouches } = e;
            this.endY = changedTouches[0].pageY;
            const elements = document.querySelector('.tech-classify-page');
            let clientHeight = elements.clientHeight;
            let scrollHeight = elements.scrollHeight;
            let scrollTop = elements.scrollTop;
            let isBottom = clientHeight + scrollTop > scrollHeight - 30;
            if (this.startY - this.endY > 30) {
                // 加载下一页
                isBottom && await this.getClassifyShelfNext();
            }
        },
        // 分组点击
        async changeCategory (index) {
            this.categoryIndex = index;
            logger.info('Classify => 分组切换');
            const categoryId = this.categoryList[index].id;
            await this.getClassifyShelf(categoryId);
            // 重置位置
            document.querySelector('.tech-classify-page').scrollTop = document.querySelector('.search-element').offsetHeight;
        },
        async addToBag(item) {
            logger.info('Classify => 选择商品规格', item);
            this.goodsDetail = item;
            setTimeout(() => {
                this.$refs.choose.show();
            }, 50);
        },
        async ensureChoose(skuInfo) {
            logger.info('Classify => 选择规格为', skuInfo);
            const item = {
                prod_id: this.goodsDetail.id,
                sku_id: skuInfo.id,
                quantity: skuInfo.quantity,
                store_id: 0,
                store_name: getBrandNameCookie(),
            };
            const flag = await this.addShopBagItem(item);
            if (flag) {
                TipSuccess('加入购物车成功');
                EventBus.$emit('RefreshBagData');
            }
        },
    },
};
</script>

<style lang="less">
.tech-classify-page {
    height: 100vh;
    overflow-y: scroll;
    .menu-list-container {
        min-height: 100vh;
    }
}
</style>
